<template>
  <div>
    <!-- 搜索条件 -->
    <el-form :inline="true" :model="BedDetailsSearch" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="BedDetailsSearch.customerName" placeholder="请输入客户姓名" clearable />
      </el-form-item>

      <el-form-item label="入住日期">
        <el-date-picker unlink-panels v-model="BedDetailsSearch.startDate" type="daterange" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-divider />
    <div class="flex flex-col items-start gap-4">
      <el-segmented v-model="value" :options="options" size="default" @change="handleChange" />
    </div>
    <!-- 表格数据 -->
    <el-table :data="BedDetailsVoList" stripe style="width: 100%">
      <el-table-column type="index" width="50" label="序号"/>
      <el-table-column prop="customerName" label="客户姓名" />
      <el-table-column prop="customerSex" label="性别"  >
        <template #default="scope">
          {{ scope.row.customerSex == 0 ? '男' : '女' }}
        </template>
      </el-table-column>
      <el-table-column prop="bedDetails" label="床位详情"  />
      <el-table-column prop="startDate" label="床位使用起始日期"  />
      <el-table-column prop="endDate" label="床位使用结束日期"  />
      <el-table-column label="操作" >
        <template #default="scope">
          <el-link type="warning" @click="openChange(scope.row)"><el-icon><Switch /></el-icon>床位调换</el-link>&nbsp;&nbsp;&nbsp;
          <el-link type="primary" @click="toEdit(scope.row)"><el-icon><Edit /></el-icon>修改</el-link>
        </template>
      
      </el-table-column>
    </el-table>

    <el-divider />

    <!-- <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      class="mt-4"
      @current-change="changePage"
    /> -->

    <el-pagination
      v-model:current-page="page"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 15, 20]"
      :small="small"
      :disabled="disabled"
      :background="background"
      :border="border"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 修改对话框 -->
    <el-dialog v-model="dialogFormVisible" title="信息修改" width="500">
      <el-form :model="bedDetailsVo">
        <el-form-item label="客户姓名:" >
          <el-input readonly v-model="bedDetailsVo.customerName" autocomplete="off" />
        </el-form-item>

        <el-form-item label="性别:" >
          {{bedDetailsVo.customerSex==0?'男':'女'}}
        </el-form-item>

        <el-form-item label="床位详情:" >
          <el-input readonly v-model="bedDetailsVo.bedDetails" autocomplete="off" />
        </el-form-item>

        <el-form-item label="床位使用起始日期:" >
          <el-input readonly v-model="bedDetailsVo.startDate" autocomplete="off" />
        </el-form-item>
        <el-form-item label="床位使用结束日期:" >
          <el-date-picker
            v-model="bedDetailsVo.endDate"
            type="date"
            placeholder="请选择结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="updateBedDetails">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 床位调换 -->
    <el-dialog v-model="dialogFormVisibleChange" title="信息修改" width="500">
      <el-form :model="bedDetailsDto">
        <el-form-item label="客户姓名:" >
          <el-input readonly v-model="bedDetailsDto.customerName" autocomplete="off" />
        </el-form-item>

        <el-form-item label="旧床位详情:" >
          <el-input readonly v-model="bedDetailsDto.bedDetails" autocomplete="off" />
        </el-form-item>

        <el-form-item label="性别:" >
          {{bedDetailsDto.customerSex==0?'男':'女'}}
        </el-form-item>

        <el-form-item label="新楼号:" >
          <el-input readonly v-model="bedDetailsDto.buildingNo" autocomplete="off" />
        </el-form-item>

       <el-form-item label="新房号:" >
          <el-select v-model="bedDetailsDto.newRoomNo" placeholder="请选择房间号" style="width: 240px" @change="getBedList">
            <el-option-group
              v-for="group in roomOptions"
              :key="group.label"
              :label="group.label"
            >
              <el-option
                v-for="item in group.options"
                :key="item.id"
                :label="item.roomNo"
                :value="item.roomNo"
              />
            </el-option-group>
          </el-select>
        </el-form-item>

        <el-form-item label="新床号:" >
          <el-select
            v-model="bedDetailsDto.newBedId"
            class="m-2"
            placeholder="请选择床位"
            style="width: 240px"
          >
            <el-option
              v-for="item in bedList"
              :key="item.id"
              :label="item.bedNo"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="床位使用起始日期:" >
          <el-input readonly v-model="bedDetailsDto.startDate" autocomplete="off" />
        </el-form-item>
        <el-form-item label="床位使用结束日期:" >
          <el-input readonly v-model="bedDetailsDto.endDate" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisibleChange = false">取消</el-button>
          <el-button type="primary" @click="exchangeBed">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import BedManagerApi from '@/api/BedManager.js'
export default {
  data() {
    return {
      bedList:[],
      bedDetailsDto:{
        buildingNo:'606'
      },
      dialogFormVisibleChange:false,
      bedDetailsVo:{},
      dialogFormVisible: false,
      BedDetailsSearch: {
        customerName: '',
        startDate: [],
        isDeleted: 0
      },
      options: ['正在使用', '使用历史'],
      BedDetailsVoList:[],
      value: '正在使用',
      page: 1,
      pageSize: 5,
      total: 0,
      roomOptions:[],
    
    }
  },
  methods: {
    getBedList(val){
      BedManagerApi.getBedList(val).then(res => {
        this.bedList = res.data;
      })
    },
    exchangeBed(){
      this.bedDetailsDto = {
        buildingNo:'606',
        customerId:this.bedDetailsDto.customerId,
        endDate:this.bedDetailsDto.endDate,
        id:this.bedDetailsDto.id,
        newBedId:this.bedDetailsDto.newBedId,
        newRoomNo:this.bedDetailsDto.newRoomNo,
        oldBedId:this.bedDetailsDto.bedId
      }

      BedManagerApi.exchangeBed(this.bedDetailsDto).then(res => {
        this.$message({
          message: '调换成功',
          type: 'success'
        })
        this.dialogFormVisibleChange = false;
        this.selectBedDetailsList();
      })
    },
    openChange(row){  
      this.dialogFormVisibleChange = true;
      // 深拷贝
      this.bedDetailsDto = JSON.parse(JSON.stringify(row));
      this.bedDetailsDto.buildingNo = '606';
      // 获取所有房间信息
      BedManagerApi.getRoomList().then(res => {
        let floor1 = res.data.filter(item => {
          return item.roomFloor == '一楼';
        })

        let floor2 = res.data.filter(item => {
          return item.roomFloor == '二楼';
        })
        this.roomOptions = [
          {
            label: '一楼',
            options: floor1
          },
          {
            label: '二楼',
            options: floor2
          }
        ]
        console.log(this.roomOptions);
      })
    },
    handleSizeChange(val){
      this.pageSize = val;
      this.selectBedDetailsList();
    },
    handleCurrentChange(val){
      this.page = val;
      this.selectBedDetailsList();
    },
    updateBedDetails(){ 
      BedManagerApi.updateBedDetails(this.bedDetailsVo).then(res => {
        ElNotification.success("修改成功！");
        this.dialogFormVisible = false;
        this.selectBedDetailsList();
      })
    },
    toEdit(row) {
      this.dialogFormVisible = true;
      // 深拷贝
      this.bedDetailsVo = JSON.parse(JSON.stringify(row));
    },
    onSubmit() {
      this.page = 1;
      this.selectBedDetailsList();
    },
    handleChange(val) {
      if (val == '正在使用') {
        this.BedDetailsSearch.isDeleted = 0
      } else {
        this.BedDetailsSearch.isDeleted = 1
      }
      this.page = 1;
      this.selectBedDetailsList();
    },
    selectBedDetailsList(){
      const data={
        customerName:this.BedDetailsSearch.customerName,
        startDate:this.BedDetailsSearch.startDate[0],
        endDate:this.BedDetailsSearch.startDate[1],
        isDeleted:this.BedDetailsSearch.isDeleted,
        page:this.page,
        pageSize:this.pageSize
      }
      BedManagerApi.getBedDetailsList(data).then(res => {
        this.BedDetailsVoList = res.data.records;
        this.total = res.data.total;
        console.log(this.total);
      })
    }
  },
  created() {
    this.selectBedDetailsList();
  }
}

</script>

<style scoped></style>